const path = require("path");
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//单独css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//vue文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    entry: "./src/main.js", // 入口
    output: {
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            // 以此为基准生成打包后html文件
        }),
        new MiniCssExtractPlugin(),
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    devServer: {
        port: 3000, // 端口号
        open: true // 自动打开浏览器
    },
    module: {
        rules: [ // loader的规则
            // { //css
            //     test: /\.css$/,
            //     use: ["style-loader", "css-loader"]
            // },
            { //less
                test: /\.less$/,
                use: ["style-loader", "css-loader", 'less-loader']
            },
            { //图片文件
                test: /\.(png|jpg|gif|jpeg)$/i,
                type: 'asset'
            },
            { // 字体图标
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name].[hash:6][ext]'
                }
            },
            { //js降级处理
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                    }
                }
            },
            { //css单独文件
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                // vue 文件采用 vue-loader 来处理
                test: /\.vue$/,
                use: ['vue-loader']
            },
        ]
    }
}